<template>
	<view class="i-account" :style="[viewStyle]" v-if="accountList && accountList.length">
		<view class="body bg-white" :style="[bodyBoxStyle]">
			<view class="body__title e-flex">
				<text class="e-font-30 fw-500">{{ $t('layout.我的钱包') }}</text>
			</view>
			<view :class="styleClass">
				<view class="account-item e-flex e-flex-between" v-for="(item, index) in accountList" :key="index"
					@tap="jumpAccount(item.isDefault, item.strategy,item.frozenMoney)">
					<view class="e-font-28 c-45">{{ item.name }}</view>
					<view class="c-primary e-font-36 fw-600">{{ item.moneyAll }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from 'vue';
	export default defineComponent({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	})
</script>
<script lang="ts" setup>
	import { computed } from 'vue'
	import { CUSTOM_CURRENCY_PAGE, CUSTOM_CURRENCY_PAGE_PATH, CUSTOM_CURRENCY_LIST } from '@/env'
	import {getCustomerContractFig} from '@/common/request/api'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		useUser
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	import {useLayoutCompoments} from './hooks'
	const props = withDefaults(defineProps<{
		option : {
			layoutType : number,
			paddingTop : number,
			paddingBottom : number,
			paddingX : number,
			radiusTop : number,
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			layoutType: 1,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0
		})
	})

	const ctx = useCurrentInstance()
	
	const {viewStyle,bodyBoxStyle} = useLayoutCompoments(ctx,props.option)

	const {
		accountList
	} = storeToRefs(useUser())

	const styleClass = computed(() => {
		return `style${props.option.layoutType}`
	})


	const jumpAccount = async (type : 'Y' | 'N', id : string,moneyAll:number) => {
		const config = await getCustomerContractFig({strategy:id})
		if (CUSTOM_CURRENCY_PAGE) {
			if (CUSTOM_CURRENCY_LIST.length > 0) {
				// 在指定的特定的账户中，则跳转自定义账户详情页面
				const customCurrencyInfo = CUSTOM_CURRENCY_LIST.find(item => item.strategy === id)
				if (customCurrencyInfo) {
					ctx.$goTo(customCurrencyInfo.path, { id })
				} else {
					// 没有则跳转原本的页面
					// 2025/2/22 判断是否存在通证信息
					if(config.data) {
						ctx.$goTo('/pages/digitIntegral/index', { id,moneyAll })
					} else {
						ctx.$goTo('/pages/user/wallet/currency', { id })
					}
					
				}
			} else {
				ctx.$goTo(CUSTOM_CURRENCY_PAGE_PATH, { id })
			}
		} else {
			if (type === 'Y') {
				ctx.$goTo('/pages/user/wallet/index')
			} else {
				if(config.data) {
					ctx.$goTo('/pages/digitIntegral/index', { id,moneyAll })
				} else {
					ctx.$goTo('/pages/user/wallet/currency', { id })
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/components/list/css/layoutCommon.scss';

	.body {
		padding: 10rpx 30rpx 22rpx 30rpx;
		overflow: hidden;

		&__title {
			height: 80rpx;
		}

		.account-item {
			border: 2rpx solid #f8f8f8;
			padding: 40rpx 30rpx;
		}

		.style1 {
			.account-item {
				border-top-width: 0;

				&:first-child {
					border-top-width: 2rpx;
				}
			}
		}

		.style2 {
			display: flex;
			flex-wrap: wrap;

			.account-item {
				width: 50%;
				flex: 0 0 50%;
				border-top-width: 0;
				border-left-width: 0;

				&:nth-child(1) {
					border-top-width: 2rpx;
				}

				&:nth-child(2) {
					border-top-width: 2rpx;
				}

				&:nth-child(2n) {
					border-left-width: 2rpx;
				}
			}
		}

		.c-45 {
			color: #454545;
		}
	}
</style>